<template>
  <div class="services-page">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="container">
        <div class="header-content">
          <div class="logo" @click="$router.push('/')" style="cursor: pointer;">
            <span>视分享商城</span>
          </div>
          <div class="search-box">
            <input type="text" placeholder="搜索商品..." class="search-input">
            <button class="search-btn"><i class="fas fa-search"></i></button>
          </div>
          <div class="header-actions">
            <button class="btn btn-secondary login-btn">
              <i class="fas fa-user"></i>
              登录
            </button>
            <button class="btn btn-secondary order-btn">
              <i class="fas fa-clipboard-list"></i>
              订单
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="main">
      <div class="container">
        <div class="services-content">
          <h1 class="page-title">我们的服务</h1>
          
          <div class="services-grid">
            <div class="service-card" v-for="service in services" :key="service.id">
              <div class="service-icon">
                <i :class="service.icon"></i>
              </div>
              <h3>{{ service.title }}</h3>
              <p>{{ service.description }}</p>
              <ul class="service-features">
                <li v-for="feature in service.features" :key="feature">{{ feature }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部信息 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-bottom">
          <p>&copy; blogshare.com 版权所有 | 浙公网安备33011002014818号 | <a href="#" class="footer-link">软件许可协议</a> | <a href="#" class="footer-link">用户服务协议</a></p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const services = ref([
  {
    id: 1,
    title: '正品保障',
    description: '所有商品均为正品，假一赔十，让您购物无忧。',
    icon: 'fas fa-shield-alt',
    features: [
      '官方授权渠道',
      '正品验证系统',
      '假一赔十承诺',
      '专业质检团队'
    ]
  },
  {
    id: 2,
    title: '快速配送',
    description: '全国包邮，24小时内发货，让您享受极速购物体验。',
    icon: 'fas fa-shipping-fast',
    features: [
      '全国包邮服务',
      '24小时发货',
      '实时物流跟踪',
      '专业配送团队'
    ]
  },
  {
    id: 3,
    title: '售后保障',
    description: '7天无理由退换，30天质量问题包退，让您购物更放心。',
    icon: 'fas fa-headset',
    features: [
      '7天无理由退换',
      '30天质量问题包退',
      '专业客服团队',
      '在线技术支持'
    ]
  },
  {
    id: 4,
    title: '会员特权',
    description: '会员专享优惠，积分奖励，让您享受更多权益。',
    icon: 'fas fa-crown',
    features: [
      '会员专享价格',
      '积分奖励系统',
      '生日特别优惠',
      '专属客服服务'
    ]
  },
  {
    id: 5,
    title: '品质生活',
    description: '精选优质商品，严格质量把控，提升您的生活品质。',
    icon: 'fas fa-star',
    features: [
      '精选优质商品',
      '严格质量把控',
      '生活品质提升',
      '个性化推荐'
    ]
  },
  {
    id: 6,
    title: '安全保障',
    description: '资金安全，隐私保护，让您的购物更安全。',
    icon: 'fas fa-lock',
    features: [
      '资金安全保障',
      '隐私信息保护',
      'SSL加密传输',
      '安全支付系统'
    ]
  }
])
</script>

<style scoped>
.services-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.services-content {
  padding: 40px 0;
}

.page-title {
  font-size: 36px;
  font-weight: 700;
  color: #2d3436;
  text-align: center;
  margin-bottom: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.service-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  text-align: center;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.service-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.1);
}

.service-icon i {
  font-size: 32px;
  color: white;
}

.service-card h3 {
  font-size: 24px;
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 15px;
}

.service-card p {
  font-size: 16px;
  line-height: 1.6;
  color: #636e72;
  margin-bottom: 20px;
}

.service-features {
  list-style: none;
  padding: 0;
  text-align: left;
}

.service-features li {
  font-size: 14px;
  color: #636e72;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.service-features li::before {
  content: '✓';
  color: #667eea;
  font-weight: bold;
  position: absolute;
  left: 0;
}

@media (max-width: 768px) {
  .services-content {
    padding: 20px 0;
  }
  
  .page-title {
    font-size: 28px;
    margin-bottom: 30px;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .service-card {
    padding: 25px 20px;
  }
  
  .service-card h3 {
    font-size: 20px;
  }
}
</style> 